<template>
  <view>
    <u-toast ref="uToast"></u-toast>
    <view class="content">
      <view class="user_info">
        <up-avatar icon="account-fill" shape="circle" size="120rpx" font-size="80rpx"></up-avatar>
        <view class="text">
          <text v-if="!isLogin" @click="goLogin">立刻登录</text>
          <text v-else @tap="onHandle">{{ username }}</text>
        </view>
      </view>
      <view class="seat_info_item">
        <u-grid
            :border="false"
            col="3"
        >
          <u-grid-item
              v-for="(area,index) in areaList"
              :key="index"
          >
            <view class="area" @click="goBook(area)">
              <view class="area_text">{{ area.label }}</view>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
      <view class="menu_item">
        <view class="title" @tap="goRecordList">
          <text class="text">我的预约</text>
          <u-icon name="arrow-right" size="36rpx"></u-icon>
        </view>
        <u-divider lineColor="#999999"></u-divider>
        <view>
          <view class="result" v-for="(result,index) in resultList.list" :key="index">
            <book-info @refresh="init()" :book-info="result"></book-info>
            <u-divider lineColor="#999999"></u-divider>
          </view>
        </view>
      </view>
    </view>
    <u-action-sheet
        :actions="menusList"
        :closeOnClickOverlay="true"
        :closeOnClickAction="true"
        cancelText="关闭"
        @select="selectClick"
        @close="onCancel"
        title="操作"
        :show="show"></u-action-sheet>
  </view>
</template>

<script setup lang="ts">
import type {PageRecordReqVO, PageRecordRespVO} from "@/interfaces/book";
import {computed, getCurrentInstance, ref} from "vue";
import BookInfo from "@/components/book-info/book-info.vue";
import {BookArea} from "@/interfaces/book";
import {useStore} from "vuex";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {useGetAreaListApi, usePageRecordApi} from "@/services/api";
import type {Page} from "@/interfaces/base";


const store = useStore()
const show = ref<boolean>(false)
const isLogin = computed((): boolean => store.getters["auth/getIsLogin"])
const username = computed((): string => store.getters["auth/getUsername"])
const resultList = ref<Page<PageRecordRespVO>>({
  list: [],
  total: 0
})
const pageReq = ref<PageRecordReqVO>({
  username: username.value,
  current: 1,
  size: 10
})
const areaList = ref<BookArea[]>([])
const goLogin = () => {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}
const goBook = (area: BookArea) => {
  uni.navigateTo({
    url: `/pages/book/index?label=${area.label}&id=${area.id}&deskCount=${area.deskCount}`
  })
}
const goRecordList = () => {
  uni.navigateTo({
    url: '/pages/record/list'
  })
}

const menusList = ref([
  {
    name: '退出登录',
    handle: async () => {
      await store.dispatch('auth/logout')
      await uni.navigateTo({
        url: '/page/login/index'
      })
    }
  }
])
const onCancel = () => {
  show.value = false
}
const selectClick = (index: any) => {
  index.handle()
  show.value = false
}
const onHandle = () => {
  show.value = true
}

const init = async () => {
  const {data: areas} = await useGetAreaListApi()
  areaList.value = areas
  const {data: pageRecord} = await usePageRecordApi(pageReq.value)
  resultList.value.list = pageRecord.list
  resultList.value.total = pageRecord.total

}
onLoad(() => {
  init()
})
onShow(() => {
  init()
  const {refs} = getCurrentInstance()
  store.dispatch("auth/setUToast", refs.uToast.show)
})
</script>

<style lang="scss" scoped>
%flex-column {
  display: flex;
  flex-direction: column;
}

%flex-row {
  display: flex;
  flex-direction: row;
}

%box-common {
  border-radius: 24rpx;
  box-shadow: 10rpx 10rpx 30rpx #aaaaaa;
  margin: 24rpx;
  padding: 24rpx 48rpx;
}

.content {
  @extend %flex-column;
  width: 100vw;
  height: 100vh;

  .menu_item {
    @extend %flex-column;
    @extend %box-common;
    gap: 12rpx;

    .title {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .text {
      font-size: 36rpx;
      font-weight: bold;
    }

  }

  .user_info {
    @extend %flex-row;
    @extend %box-common;
    gap: 36rpx;
    align-items: center;

    .text {
      font-size: 36rpx;
      font-weight: bold;
    }
  }

  .seat_info_item {
    @extend %flex-column;
    margin: 24rpx;

    .area {
      width: 100%;
      height: 150rpx;
      @extend %flex-column;
      justify-content: center;
      align-items: center;

      .area_text {
        @extend %flex-column;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 80%;
        background-color: rgba(0, 122, 255, 0.53);
        border-radius: 24rpx;
        box-shadow: 10rpx 10rpx 30rpx #aaaaaa;
        color: #ffffff;
      }
    }

  }
}
</style>
